<!-- 重置密码 -->
<template>
  <div class="page-account">
    <div class="register-box">
      <div class="register-container">
        <div class="page-header">
          <h1>找回密码</h1>
        </div>
        <div>
          <span>已有账号</span>
          <a @click="login()">立即登录</a>
        </div>
      </div>
      <div class="register-flow-container">
        <div
          class="register-flow-item"
          :class="index <= curIndex ? 'register-flow-item-current' : ''"
          v-for="(item, index) in flowList"
          :key="item.id"
        >
          <b>{{ item.id }}</b>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="register-flow-main">
        <NumberVerification @handleAgree="handleAgree" v-if="curIndex == 0" />
        <SetPassword @handleAgree="handleAgree" v-if="curIndex == 2" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import NumberVerification from "./numberVerification.vue";
import SetPassword from "./setPassword.vue"

export default {
  components: { NumberVerification,SetPassword},
  data() {
    // 二次校验密码
    const validatePassCheck = (rule, value, callback) => {
      if (value !== this.$refs.form.formValidate.password) {
        callback(new Error("两次输入的密码不匹配！"));
      } else {
        callback();
      }
    };

    return {
      flowList: [
        {
          id: 1,
          name: "手机验证",
        },
        {
          id: 2,
          name: "设置密码",
        }
      ],
      passwordRule: [
        {
          required: true,
          message: "密码不能为空！",
          trigger: "change",
        },
        {
          min: 6,
          message: "密码不能少于6位！",
          trigger: "change",
        },
      ],
      passwordConfirmRule: [
        {
          required: true,
          message: "确认密码不能为空！",
          trigger: "change",
        },
        { validator: validatePassCheck, trigger: "change" },
      ],
      // 密码长度，在密码强度提示时作为判断依据
      passwordLen: 0,
      curIndex: 0,
    };
  },
  computed: {
    // 密码强度提示文案等
    passwordTip() {
      let strong = "强";
      let className = "strong";
      let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
      let color = "#19be6b";

      if (this.passwordLen < 6) {
        strong = "太短";
        className = "low";
        color = "#ed4014";
      } else if (this.passwordLen < 10) {
        strong = "中";
        className = "medium";
        color = "#ff9900";
      }

      return {
        strong,
        class: `page-account-register-tip-${className}`,
        percent: percent * 10,
        color,
      };
    },
  },
  methods: {
    ...mapActions("admin/account", ["register", "login"]),
    login() {
      this.$router.push({
        name: "login",
      });
    },
    // 同意协议
    handleAgree(index) {
      this.curIndex = index;
    },
  },
  created() {
    let { query } = this.$route;
    if (query.current) {
      this.curIndex = query.current;
    }
  },
};
</script>

<style lang="less" scoped>
.login-container {
  margin: 0 auto;

  h1 {
    color: #333;
  }

  .page-tab {
    width: 420px;
    padding: 30px 10px;

    ::v-deep .ivu-tabs-bar {
      border-bottom: 0;
    }

    ::v-deep .ivu-tabs-nav-scroll {
      display: flex;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
    }
  }
}
.register-box {
  padding: 140px 160px;
  width:100%;
  min-height: 100vh;
  background: #fff;
}
.register-flow-container {
  display: flex;
  justify-content: center;
  margin-top: 33px;
  border-bottom: 1px solid #c4c4c4;
  padding-bottom: 20px;
}
.register-flow-item {
  margin:0 20px;
  b,
  span {
    display: inline-block;
    font-size: 16px;
    color: #86909c;
    border-radius: 4px;
  }
  b {
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
    background: #e5e6eb;
  }
}
.register-flow-item-current {
  b {
    background: #2d73d4;
    color: #fff;
  }
  span {
    color: #2d73d4;
  }
}
.register-flow-main {
  margin-top: 25px;
}
</style>
